import { Form, Input, Button, Modal, Table, TimePicker, message } from 'antd';

import moment from 'moment';

const FormItem = Form.Item;

@Form.create()
export default class MatchScoreForm extends React.Component {
  state = {};

  okHandle = () => {
    const { form, handleAdd } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleAdd(fieldsValue);
      form.resetFields();
      this.setState({ curScore: null });
    });
  };

  getTitle = () => {
    return '成绩管理';
  };

  close = () => {
    const { form, handleModalVisible } = this.props;
    form.resetFields();
    this.setState({ curScore: null });
    handleModalVisible();
  };

  render() {
    const { modalVisible, form, modifyMatch, scoreList } = this.props;

    const { curScore } = this.state;
    const format = 'HH:mm';
    return (
      <Modal
        title={this.getTitle()}
        width={1000}
        visible={modalVisible}
        onOk={this.okHandle}
        onCancel={() => this.close()}
        okText="保存"
        cancelText="关闭"
        maskClosable={false}
      >
        <div style={{ marginBottom: 30 }}>
          <Table
            dataSource={scoreList ? scoreList : []}
            pagination={false}
            bordered
            size="small"
            columns={[
              {
                title: modifyMatch && modifyMatch.bisaiId,
                width: 100,
                dataIndex: 'seq',
                align: 'center',
                render: value => <span>第{value}场</span>,
              },
              {
                title: modifyMatch ? modifyMatch.gamePosName1 : '',
                dataIndex: 'score1',
                align: 'center',
                width: 150,
              },
              {
                title: '',
                width: 10,
                align: 'center',
                render: value => <span>:</span>,
              },
              {
                title: modifyMatch ? modifyMatch.gamePosName2 : '',
                dataIndex: 'score2',
                align: 'center',
                width: 150,
              },
              {
                title: '开始时间',
                dataIndex: 'startTime',
                align: 'center',
                width: 150,
              },
              {
                title: '结束时间',
                dataIndex: 'endTime',
                align: 'center',
                width: 150,
              },
              {
                title: '操作',
                render: (value, item) => (
                  <div>
                    <Button
                      style={{ marginRight: 5 }}
                      onClick={() => {
                        console.log(item);
                        if (modifyMatch.isPhaseFinished) {
                          message.error('阶段已完成，不能再修改成绩');
                        } else {
                          form.resetFields();
                          this.setState({ curScore: item });
                        }
                      }}
                    >
                      编辑
                    </Button>
                  </div>
                ),
              },
            ]}
          />
        </div>
        <div>
          {form.getFieldDecorator('id', {
            rules: [{ required: true, message: '请从上面的成绩列表中选择要修改的成绩' }],
            initialValue: curScore && curScore.id,
          })(<Input type="hidden" />)}
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="场序">
            {form.getFieldDecorator('seq', {
              rules: [{ required: true, message: '请从上面的成绩列表中选择要修改的成绩' }],
              initialValue: curScore && curScore.seq,
            })(<Input readOnly style={{ width: '100%' }} />)}
          </FormItem>
          <FormItem
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 15 }}
            label={modifyMatch && modifyMatch.gamePosName1 + '得分'}
          >
            {form.getFieldDecorator('score1', {
              rules: [
                {
                  required: true,
                  message: modifyMatch && '请输入' + modifyMatch.gamePosName1 + '得分',
                },
              ],
              initialValue: curScore && curScore.score1,
            })(<Input style={{ width: '100%' }} placeholder="请输入得分" />)}
          </FormItem>

          <FormItem
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 15 }}
            label={modifyMatch && modifyMatch.gamePosName2 + '得分'}
          >
            {form.getFieldDecorator('score2', {
              rules: [
                {
                  required: true,
                  message: modifyMatch && '请输入' + modifyMatch.gamePosName1 + '得分',
                },
              ],
              initialValue: curScore && curScore.score2,
            })(<Input style={{ width: '100%' }} placeholder="请输入得分" />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="开始时间">
            {form.getFieldDecorator('startTime', {
              initialValue: curScore && curScore.startTime && moment(curScore.startTime, format),
            })(<TimePicker format={format} />)}
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="结束时间">
            {form.getFieldDecorator('endTime', {
              initialValue: curScore && curScore.endTime && moment(curScore.endTime, format),
            })(<TimePicker format={format} />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}
